<template>
    <div class="center">
        <v-chart :option="option()" autoresize />
    </div>
</template>

<script>
export default {
    name: 'Center',
    methods: {
        option: () => {
            return {
                legend: {
                    top: 'bottom'
                },
                grid: {
                    left: 1000,
                    right: 1,
                    bottom: 2,
                    top: 3,
                    containLabel: true
                },
                series: [
                    {
                        type: 'pie',
                        name: 'WEEKLY WRITE ARTICLES',
                        roseType: 'radius',
                        radius: [15, 95],
                        center: ['50%', '50%'],
                        data: [
                            { value: 320, name: 'Industries' },
                            { value: 240, name: 'Technology' },
                            { value: 149, name: 'Forex' },
                            { value: 100, name: 'Gold' },
                            { value: 59, name: 'Forecasts' }
                        ],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            };
        }
    }
}
</script>

<style>

</style>